<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h2>{{ count }}</h2>
    <ol>
      <li v-for="(item, index) of todolist" :key="index">
        {{ item.content }}
      </li>
    </ol>
    <button @click="clearList">clear todolist</button>
    <Button>Default</Button>
    <Button type="primary">Primary</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="text">Text</Button>
    <br /><br />
    <Button type="info">Info</Button>
    <Button type="success">Success</Button>
    <Button type="warning">Warning</Button>
    <Button type="error">Error</Button>

    <hr />

    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>

    <hr />
    <van-button type="primary" @click="show = true">选择日期</van-button>
    <van-calendar v-model="show" @confirm="onConfirm" />
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "Home",
  computed: {
    ...mapState(["count"]),
    ...mapState("articlesModule", ["articles"]),
    ...mapState("todolistModule", ["todolist"])
  },
  data() {
    return {
      date: "",
      show: false
    };
  },
  async created() {
    // this.$store.dispatch('getTodoListData')
    // console.log(this.todolist)
    // console.log(this.$store.state.articlesModule.articles)
    // this.getTodoListData();
    // console.log(this.articles);
    /*this.asyncPrint(1000)
      .then(res => {
        console.log(res)
      })
      .catch(e => console.log(e))
      .finally(() => ({}))*/
    /*try {
      await this.asyncPrint(500)
    } catch (e) {
      console.log(e)
    } finally {
      //
    }*/
  },
  methods: {
    ...mapActions("todolistModule", ["getTodoListData"]),
    clearList() {
      this.$store.commit("todolistModule/SET_TODOLIST", []);
    },
    formatDate(date) {
      console.log(date);
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
      console.log(this.date);
    }
    /*timeout(ms) {
      return new Promise(resolve => {
        setTimeout(resolve, ms)
      })
    },*/
    /*async timeout(ms) {
      await new Promise(resolve => {
        setTimeout(resolve, ms)
      })
    },
    async asyncPrint(ms) {
      await this.timeout(ms)
      throw new Error('error')
      // await this.timeout(ms)
      // return '我等待了一会'
    }*/
  }
};
</script>
